<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="120px"
        :model="projectForm"
        style="padding-right: 30px;padding-top: 30px;"
        :rules="subjectlevyFormRules"
        ref="projectForm"
      >
        <el-row>
          <el-col :span="12">
            <el-col :span="20">
              <el-form-item class="form-item" label="规划名称" prop="title">
                <el-input v-model="projectForm.title" placeholder="请输入规划名称" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="20">
              <el-form-item class="form-item" label="规划编码" prop="refNo">
                <el-input v-model="projectForm.refNo" placeholder="请输入规划编码" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-col :span="20">
              <el-form-item class="form-item" label="征求范围:" prop="planningLevel">
                <el-select
                  v-model="projectForm.planningLevel"
                  placeholder="请选择"
                  style="width: 280px"
                >
                  <el-option
                    v-for="item in planningLevelDic"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="14">
              <el-select
                v-model="projectForm.planningLevel"
                placeholder="请选择"
                style="width: 280px"
              >
                <el-option
                  v-for="item in planningLevelDic"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button type="success">向社会征集(发送至互联网)</el-button>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-col :span="20">
              <el-form-item class="form-item" label="反馈部门:" prop="planningLevel">
                <el-input v-model="projectForm.dept" placeholder="请输入规划名称"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-bottom: -10px;">
            <el-col :span="20">
              <el-col :span="12">
                <el-form-item class="form-item" label="时间要求" prop="startDate" style="float: left;">
                  <div>
                    <el-date-picker
                      style="width: 130px"
                      v-model="projectForm.startDate"
                      type="year"
                      placeholder="选择日期"
                      value-format="yyyy"
                      format="yyyy"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="margin-left: -40px;">
                <el-col :span="12">
                  <el-form-item class="form-item" label="" prop="endDate" style="float: left">
                    <div style="float: left">
                      <el-date-picker
                        style="width: 130px"
                        v-model="projectForm.endDate"
                        type="year"
                        placeholder="选择日期"
                        value-format="yyyy"
                        format="yyyy"
                      >
                      </el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <h5 style="float:right">至</h5>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-col :span="20">
              <el-form-item class="form-item" label="联系人" prop="title">
                <el-input v-model="projectForm.link" placeholder="请输入联系人"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="20">
              <el-form-item class="form-item" label="联系电话" prop="pmus">
                <el-input v-model="projectForm.linkNum" placeholder="请输入联系电话"></el-input>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
      <div style="float: right;margin-right: 17px;margin-top: 52px;">
      </div>
      <card-header :header-data="fheaderData"></card-header>
      <div class="card-body">
        <avue-crud :data="subjectListData"
                   :option="tableoption"
                   :page="page"
                   class="avuecrud">
          <template slot-scope="scope" slot="menu">
            <div class="menu-title" @click.stop="subjectDetail(scope.row,scope.index)">
              <i class="iconfont iconview icon-primary"></i>
              <p class="menu-title-text">查看</p>
            </div>
          </template>
        </avue-crud>
      </div>
    </div>
  </basic-container>
</template>

<script>
  import {subjectlevyFormRules} from "@/const/infoRules";
  import {subjectLevy} from "@/api/subject";
  import {PROJECT_DIC} from '@/const/dict';
  import {resultList} from "@/api/planning/result";
  import {getAreaByType} from "@/api/system";

  export default {
    data() {
      return {
        headerData: {
          title: '规划意见征询',
          buttonList: [
            {
              name: '关闭',
              type: 'info'
            }, {
              name: '保存',
              type: 'primary'
            }, {
              name: '发布',
              type: 'warning'
            }
          ]
        },
        fheaderData: {
          title: '规划成果'
        },
        categoryDic: PROJECT_DIC.CATEGORY,
        orgCodeDic: PROJECT_DIC.ORG_CODE,
        planningLevelDic: PROJECT_DIC.PLANNING_LEVEL,
        authorityLevelDic: PROJECT_DIC.APPROVING_AUTHORITY_LEVEL,
        natureDIC: PROJECT_DIC.APPROVING_AUTHORITY_NATURE,
        subjectListData: [{
          achievementId: 431,
          achievementNo: 'N98899474748',
          achievementTitle: "海洋主题功能区规划",
          createNickname: "省发改委规划管理员",
          createTime: "2019-05-23 20:29:30",
          createUserId: 131079,
          createUsername: "ghadmin.fgw",
          description: "0002",
          endDate: null,
          isDelete: false,
          state: "0",
          subjectId: 2,
          title: "0002",
          updateNickname: null,
          updateTime: null,
          updateUserId: null,
          updateUsername: null
        }],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableoption: {
          page: true,
          menuWidth: 300,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "规划名称",
              width: 220,
              prop: "achievementTitle",
              cell: true,
            },
            {
              label: "版本号",
              width: 180,
              prop: "achievementNo",
              cell: true,
            },
            {
              label: "上传时间",
              width: 180,
              prop: "createTime",
              cell: true
            }
          ]
        },
        tableLoading: false,
        projectForm: {
          title: '战略平台规划《中国自由贸易试验区建设实施方案》',
          refNo: '2017330000BBC0015'
        }
      }
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .card-border {
    border: 1px solid #d2d2d2;
    padding: 12px;
  }

  .form-submit {
    text-align: center;
    margin-top: 15px;
  }

  .card-body {
    padding: 10px;
  }

  .head-button .el-button {
    padding: 8px 15px;
  }

  .form-group {
    margin-top: 1rem;
    margin-left: 26px;
  }

  .form-label {
    font-weight: 600;
    margin-right: 2rem;
  }

  .form-submit-dialog {
    float: right;
    margin-right: 22px;
  }

  .search-collapse {
    margin-top: 1rem;
  }

  .collapse-title {
    margin-top: -1rem;
    text-align: center;
    border-top: 1px solid #dedbdb;
    border-bottom: 1px solid #dedbdb;
  }

  .collapse-title-text {
    color: #4297dc;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin-left: 0.2rem;
    margin: 10px 0px;
  }

  .collapse-title-img {
    width: 1.2rem;
    position: relative;
    top: 0.25rem;
  }

  .showall {
    padding: 10px;
    height: 0px;
    overflow: hidden;

    .fade-enter-active {
      transition: opacity 0.9s ease-out;
    }

    .fade-leave-active {
      transition: opacity 0s ease-out;
    }

    .fade-enter, .fade-leave-to {
      opacity: 0;
    }

    .fade1-enter-active {
      transition: opacity 0.9s ease-out;
    }

    .fade1-enter, .fade1-leave-to {
      opacity: 0;
    }

    clear: both;
    /*margin-top: 6px;*/
  }

  .showall.active {
    height: auto;
    background: #fff;
    min-height: 150px;
  }

  #searchInput {
    height: 40px;
    border: 1px solid #dadada;
    outline: 0;
    line-height: 40px;
    text-indent: 1rem;
    border-radius: 0.31rem;
  }

  .table-bordered-temp {
    border: 1px solid #dee2e6;
  }

  .table-temp {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
  }
</style>


